<template name="indexSwiper">
	<swiperDot :current="current" :dotsOption="dotsStyles" :list="swiperList">
		<swiper class="swiperContter" :autoplay="swiperOption.autoPlay" :interval="swiperOption.interval" :style="{ height: swiperOption.swiperHeight + 'px' }" @change="slideSwip">
			<swiper-item class="swiperSlide" v-for="(item, index) in swiperList" :key="index" :style="{ borderRadius: swiperOption.borderRadius + 'px' }">
				<image
					class="swiperImg"
					:src="item.url"
					:data-type="item.linkType"
					:data-id="item.linkId"
					:data-link="item.linkUrl"
					:style="{ height: swiperOption.swiperHeight + 'px' }"
					@tap="indexSwiperJump"
				></image>
			</swiper-item>
		</swiper>
	</swiperDot>
</template>

<script>
import swiperDot from '@/components/swiperDot/swiperDot.vue';
import Request from '@/sdk/pocky-request/index.js';
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
export default {
	components: {
		swiperDot
	},
	name: 'indexSwiper', //组件名称
	computed: {
		...mapState({
			locationCity: state => state.map.locationCity,
			selectCity: state => state.map.selectCity
		})
	},
	props: {
		hasFresh: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: function() {
				return [
					{
						id: 8,
						type: 1,
						linkType: 4,
						linkUrl: '',
						url: '../../static/loding.png',
						name: '',
						status: 0,
						sold: 0
					}
				];
			}
		}
	},
	// 组件参数
	data() {
		return {
			current: 0,
			swiperOption: {
				autoPlay: true,
				interval: 3000,
				borderRadius: 10,
				swiperHeight: parseInt((uni.getSystemInfoSync().screenWidth - uni.upx2px(56)) / (960 / 300))
			},
			swiperList: [
				{
					id: 8,
					type: 1,
					linkType: 4,
					linkUrl: '',
					url: '../../static/loding.png',
					name: '',
					status: 0,
					sold: 0
				}
			],
			dotsStyles: {
				activeStyle: {
					width: 20,
					height: 8,
					borderRadius: 4,
					backgroundColor: '#ffcd11',
					border: 'none',
					color: ''
				}
			}
		};
	},
	watch: {
		locationCity(newVal) {
			this.getData();
		},
		selectCity(newVal) {
			this.getData();
		},
		hasFresh(newVal) {
			if (!newVal) {
				this.getData();
			}
		}
	},
	// 组件方法
	methods: {
		slideSwip: function(e) {
			this.current = e.detail.current;
		},
		indexSwiperJump(e) {
			let type = e.currentTarget.dataset.type;
			let _id = e.currentTarget.dataset.id;
			if (type == 1) {
				//课程详情
				this.toPage({
					url: 'goodDetail',
					id: _id
				});
			} else if (type == 2) {
				//门店详情
				this.toPage({
					url: 'shopDetail',
					id: _id
				});
			} else {
				//其他
				this.toPage({
					url: e.currentTarget.dataset.link
				});
			}
		},
		getData() {
			let areaId = this.selectCity.cityCode;
			Request()
				.request({
					url: '/mall/recom/banner.do',
					method: 'post',
					data: {
						channel: 0,
						areaId: areaId
					}
				})
				.then(res => {
					if (res.data.result == 1) {
						this.swiperList = res.data.data;
					} else {
						// uni.showToast({
						// 	title: '购物车数据获取失败,'+res.data.msg,
						// 	icon: 'none'
						// });
					}
				});
		}
	},
	created() {
		setTimeout(() => {
			this.getData();
		}, 100);
	}
};
</script>

<style lang="less">
@import '../../common/public.less';

.swiperContter {
	width: 100%;
	transition: all 0.3s;
}

.swiperImg {
	width: 100%;
	display: block;
}

.swiperSlide {
	overflow: hidden;
}
</style>
